import React, { Component } from 'react'
import { PanResponder, View, Dimensions, TouchableOpacity, Platform } from 'react-native'
import Svg, { Path, Circle, G, Text, Image, Polygon} from 'react-native-svg'
import Icon from 'react-native-vector-icons/Ionicons'

const WAKE_ICON = (
    <G>
      <Path d="M2,12.9h1.7h3h2.7h3H14c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7c-0.9,0-1.7-0.7-1.7-1.7v-4c0-2.1-1.5-3.8-3.4-4.2C9,1.6,9,1.4,9,1.3c0-0.5-0.4-1-1-1c-0.5,0-1,0.4-1,1c0,0.2,0,0.3,0.1,0.4c-2,0.4-3.4,2.1-3.4,4.2v4c0,0.9-0.7,1.7-1.7,1.7c-0.4,0-0.7,0.3-0.7,0.7C1.3,12.6,1.6,12.9,2,12.9z"/>
      <Path d="M8,15.7c1.1,0,2.1-0.9,2.1-2.1H5.9C5.9,14.8,6.9,15.7,8,15.7z"/>
    </G>
  );

export default class CircleSlider extends Component {
  constructor(props){
    super(props)

    this.state = {
      angle: this.props.value
    };
  }

  componentWillMount() {
    this._otherPanResponde = PanResponder.create({
        onStartShouldSetPanResponder: (e,gs) => true,
        onStartShouldSetPanResponderCapture: (e,gs) => true,
        //onMoveShouldSetPanResponder: (e,gs) => true,
        //onMoveShouldSetPanResponderCapture: (e,gs) => true,
        onPanResponderRelease: (e, gs) => {
            let xOrigin = this.props.xCenter - (this.props.dialRadius + this.props.btnRadius);
            let yOrigin = this.props.yCenter - (this.props.dialRadius + this.props.btnRadius);
            let a = this.cartesianToPolar(gs.x0 - xOrigin, gs.y0 - yOrigin)
            this.setState({angle: a})
        },

    })
    this._panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (e,gs) => true,
        onStartShouldSetPanResponderCapture: (e,gs) => true,
        onMoveShouldSetPanResponder: (e,gs) => true,
        onMoveShouldSetPanResponderCapture: (e,gs) => true,
        onPanResponderMove: (e,gs) => {
            if (Math.abs(gs.dx) <= 5) {
               return
            }
            let xOrigin = this.props.xCenter - (this.props.dialRadius + this.props.btnRadius);
            let yOrigin = this.props.yCenter - (this.props.dialRadius + this.props.btnRadius);
            let a = this.cartesianToPolar(gs.moveX-xOrigin, gs.moveY-yOrigin);
            this.setState({angle: a});
            this.props.onValueChange(a)
            //console.log('onPanResponderMove')
            // console.log('this.props.xCenter:', this.props.xCenter)
            // console.log("this.props.yCenter", this.props.yCenter)
            // console.log("xOrigin:" , xOrigin, "yOrigin:" , yOrigin)
            // console.log("moveX:" , gs.moveX, "moveY:" , gs.moveY)
            // console.log("angle:", a)
            //console.log('dx', gs.dx)
        },
        // onPanResponderReject: (e, gestureState) => {console.log('onPanResponderReject')},
        // onPanResponderGrant: (e, gestureState) => {console.log('onPanResponderGrant')},
        // onPanResponderStart: (e, gestureState) => {console.log('onPanResponderStart')},
        // onPanResponderEnd: (e, gestureState) => {console.log('onPanResponderEnd')},
        // //onPanResponderMove: (e, gestureState) => {console.log('onPanResponderMove')},
        // onPanResponderTerminate: (e, gestureState) => {console.log('onPanResponderTerminate')},
        // onPanResponderTerminationRequest: (e, gestureState) => {console.log('onPanResponderTerminationRequest')},
        // onShouldBlockNativeResponder: (e, gestureState) => {console.log('onShouldBlockNativeResponder')},
        onPanResponderRelease: (e, gestureState) => {
            // console.log('onPanResponderRelease')
            // console.log('dx', gestureState.dx)
            // console.log('moveX', gestureState.moveX)
            // //没有移动过，才可以触发点击事件
            if (Math.abs(gestureState.dx) <= 15) {
                this.props.onIconPress()
            }

        },
       
   
      
    });
  }

  componentWillReceiveProps (nextProps) {
      this.setState({angle: nextProps.value})
  }

  polarToCartesian(angle) {
    let r = this.props.dialRadius;
    let hC = this.props.dialRadius + this.props.btnRadius;
    let a = (angle-90) * Math.PI / 180.0;

    let x = hC + (r * Math.cos(a));
    let y = hC + (r * Math.sin(a));
    return {x,y};
  }

  cartesianToPolar(x,y) {
    let hC = this.props.dialRadius + this.props.btnRadius;

    if (x === 0) {
      return y>hC ? 0 : 180;
    }
    else if (y === 0) {
      return x>hC ? 90 : 270;
    }
    else {
      return (Math.round((Math.atan((y-hC)/(x-hC)))*180/Math.PI) +
        (x>hC ? 90 : 270));
    }
  }

  render() {
    let width = (this.props.dialRadius + this.props.btnRadius)*2;
    let bR = this.props.btnRadius;
    let dR = this.props.dialRadius;
    let dW = this.props.dialWidth
    let startCoord = this.polarToCartesian(0);
    let endCoord = this.polarToCartesian(this.state.angle);

    let _foo = this.polarToCartesian(270)

    return (
        <Svg
            ref="circleslider"
            width={width}
            height={width}
            // {...this._otherPanResponde.panHandlers}
        >
            <Circle r={dR}
                cx={width/2}
                cy={width/2}
                stroke='#eee'
                strokeWidth={this.props.dialWidth}
                fill='none'
                //{...this._otherPanResponde.panHandlers}
                />

            <Path stroke={this.props.meterColor}
                strokeWidth={this.props.dialWidth}
                fill='none'
                d={`M${startCoord.x} ${startCoord.y} A ${dR} ${dR} 0 ${this.state.angle>180?1:0} 1 ${endCoord.x} ${endCoord.y}`}
            />

            {/* <G x={_foo.x} y={_foo.y}>
                <Path fill={'white'} d="M16 9l26.667 16-26.667 16z" />
            </G> */}
            {/* <G x={startCoord.x - dW } y={startCoord.y + dR}>
                <Text
                    fontSize="30"
                    fontWeight="bold"
                    fill="white"
                >
                   {this.props.face()}
                </Text>
            </G>
             */}
           
             

            <G x={endCoord.x-bR} y={endCoord.y-bR} {...this._panResponder.panHandlers}>
                {Platform.OS == 'ios' ? ( 
                    <Circle r={bR}
                        cx={bR}
                        cy={bR}
                        fill="orange"
                        {...this._panResponder.panHandlers}
                    />) : 
                    (<Circle r={bR}
                        cx={bR}
                        cy={bR}
                        fill="orange"
                    />)
                    }
                    {/* <Path d="M0 0h13.333v32h-13.333zM18.666 0h13.334v32h-13.334z" /> */}
            
                <Path fill={'white'} d="M16 9l26.667 16-26.667 16z" />
            </G>
        </Svg>
    )
  }
}

CircleSlider.defaultProps = {
  btnRadius: 15,
  dialRadius: 100,
  dialWidth: 5,
  meterColor: '#0cd',
  textColor: '#fff',
  textSize: 20,
  value: 0,
  xCenter: Dimensions.get('window').width/2,
  yCenter: Dimensions.get('window').height/2,
  onValueChange: x => x,
  onIconPress: x => x
}